<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>政务服务-首页</title>
		<link href="client/css/mui.min.css" rel="stylesheet" />
		<link href="client/css/build.css" rel="stylesheet" type="text/css" />
		<script src="client/js/mui.min.js"></script>
		<script src="client/js/jquery-1.12.4.min.js"></script>
		<script src="client/js/echarts.min.js"></script>
		<style>
			#dianji{
				background: url("client/images/user-fangda.png") no-repeat 2px;
			}
		</style>
	</head>
	<body>

		<div class="mui-content">
			<div class="mui-control-content mui-active">
				<!-- 头部背景图  start -->
				<div class="banner-content bg_box">
					<img src="client/images/home_bg.jpg" width="100%" />
				</div>
				<!-- 头部背景图  end -->
				
				<!-- 待办 start -->
				<div class="wait_handle">
					<div class="mui-slider">
						<div class="mui-slider-group">
							<div class="mui-slider-item">
								<br>

								<input style="size: auto;padding-left: 40px" type="text" id="dianji" placeholder="输入搜索条款编号，例25.1309"/>

								<ul class="mui-table-view mui-grid-view" >
									<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" th:each="law:${laws}">
										<a th:href="@{/selectMuLuByLawId(lid=${law.id})}">
<!--											<span class="mui-badge"></span>-->
											<span class="icon"><img src="client/images/home_icon01.png" /></span>
											<div class="mui-media-body" th:text="${law.lawsAlias}">长江航运指数管理待办</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- 待办 end -->
				
				<!-- 公告 start -->
				<div class="news_sj_dxs_box ">
					<div class="scrollnews flex-space-between flex-between-center">
						<span><img src="client/images/gonggao.png"></span>
						<ul>
							<li><a href="#">关于中国民用航务管理平台服务升级的通知</a></li>
							<li><a href="#">系统公告！</a></li>
							<li><a href="#">认真学习十九大精神，争取贯彻落实习总书记讲话</a></li>
							<li><a href="#">不忘初心，牢记使命</a></li>
						</ul>
						<a class="mui-icon mui-icon-arrowright" href="#"></a>
					</div>
				</div>
				<!-- 公告 end -->
				


				<!-- 统计分析 end -->
				
				<!-- 底部信息-->
				<div class="footer_box">
					<div class="footer_txt">
						<p>版权所有：中国民用航空局</p>
						<p>ICP备案编号：京ICP备19046468号</p>
					</div>
				</div>				
			</div>

			<!-- 底部tabbar    start -->
			<nav class="mui-bar mui-bar-tab tabbar-bottom">
				<a class="mui-tab-item mui-active" onclick="window.location.href='/selectAllLaws'">
					<span class="mui-icon"><img src="client/images/nav_home_on.png" /></span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a class="mui-tab-item" onclick="window.location.href='/hudongAdd'">
					<span class="mui-icon"><img src="client/images/nav_hudong.png" /></span>
					<span class="mui-tab-label">咨询</span>
				</a>
				<a class="mui-tab-item" onclick="window.location.href='user.html'">
					<span class="mui-icon"><img src="client/images/nav_user.png" /></span>
					<span class="mui-tab-label">我的</span>
				</a>
			</nav>
			<!-- 底部tabbar    end -->
			<script src="client/js/echart_tab.js"></script>
			<script type="text/javascript">
				mui.init();
				
				// 系统公告滚动
				$(document).ready(function(){
					var timer;
					//滚动文字
					function runtxt(){
						$(".scrollnews ul").animate({marginTop:"-40px"},300,
							function(){
								$(".scrollnews ul li:last").after($(".scrollnews ul li:first"))
								$(".scrollnews ul").css("margin-top",0)
							}
						)
					}   
					var t=$(".scrollnews ul li").length;
					if(t==1){
						clearInterval(timer)
					}else{
						timer=setInterval(runtxt,5000);
					}
				})
				
				//统计分析标题tab
				$(document).ready(function(){
					$("#tab_title li").mousedown(function(){
						var t=$(this).index();
						$(this).addClass("cur");
						$(this).siblings().removeClass("cur");
						$("#tab_box .con_box").hide().eq(t).show().css("height","auto");
					})
				})

				$("#dianji").click(function () {
					window.location.href="/user-clause-list.html";
				});
				
				//办件统计柱状图
				var dom = document.getElementById("bjtj_c");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
				    legend: {
						"textStyle": {
							"fontSize": 10
						},
						"top": "5%",
						"itemHeight": 10,
						"itemWidth": 15
					},
				    tooltip: {},
				    dataset: {
				        dimensions: ['product', '类型1', '类型2', '类型3'],
				        source: [
				            {product: '2018', '类型1': 43, '类型2': 85, '类型3': 93},
				            {product: '2019', '类型1': 83, '类型2': 73, '类型3': 55},
				            {product: '2020', '类型1': 86, '类型2': 65, '类型3': 82}
				        ]
				    },
				    xAxis: {type: 'category'},
				    yAxis: {},
				    // Declare several bar series, each will be mapped
				    // to a column of dataset.source by default.
				    series: [
				        {
							type: 'bar',
							"barWidth":20
						},
				        {
				        	type: 'bar',
				        	"barWidth":20
				        },
						{
							type: 'bar',
							"barWidth":20
						}
						
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
				
			</script>
		</div>
	</body>
</html>
